// ==UserScript==
// @name         超链接及任务名称规范
// @namespace    http://tampermonkey.net/
// @version      2025-01-08
// @description  try to take over the world!
// @author       wangshushuo
// @match        https://devops.cloud.oppoer.me/micro-app/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=oppoer.me
// @require      https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js
// @require      https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    let renderTaskNameList_state = false;

    function renderTaskNameList() {
        renderTaskNameList_state = true;

        const targetEl = document.querySelector('.detail-col-right')
        // 添加一个id为taskNameList-wangshushuo的div元素
        const container = document.createElement('div');
        container.id = 'taskNameList-wangshushuo';
        targetEl.appendChild(container);

        const taskNames = [
            '【预研】XXX方案预研',
            '【开发】需求分析&技术方案输出',
            '【开发】任务XXX-AAA功能开发',
            '【开发】与AAA端联调',
            '【开发】埋点开发+上报实现+监测上报',
            '【开发】自测+提测+showcase',
            '【部署】部署上线',
            '协助AAA侧定位问题',
            '整机bug处理',
            '解决其他团队提过来临时的bug',
            '线上问题处理',
        ]
        new Vue({
            el: '#taskNameList-wangshushuo',
            data: {
                message: 'Hello, Vue in Tampermonkey!',
                taskNames,
            },
            template: `
            <div style="flex-direction: column; display: flex; gap: 10px;position: fixed;right: 20px;bottom: 10px; background-color: white; border: 1px solid #ccc; padding: 10px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;">
                <button @click="destroyComponent">关闭</button>
                <div>任务名称列表</div>
                <div style="display: flex; flex-direction: column; gap: 10px;">
                    <p v-for="i in taskNames" style="margin: 0">{{i}}<button @click="editInput(i)" style="margin-left:5px;">添加</button></p>
                </div>
            </div>
            `,
            methods: {
                // 销毁组件的方法
                destroyComponent() {
                    this.$destroy(); // 销毁 Vue 实例
                    this.$el.remove(); // 从 DOM 中移除挂载的元素
                },
                editInput(text) {
                    let title = document.querySelector('.title-input-inactive').innerText;
                    // 去掉【xx】
                    title = title.replace(/【.*?】/g, '');
                    const input = document.querySelector('table input[type="text"]');
                    if (input && input.placeholder === '输入标题,回车新建') {
                        input.value = text.replace('XXX', title);
                    }

                }
            },
            beforeDestroy() {
                renderTaskNameList_state = false;
            }
        });
    }

    const cb = _.debounce(() => {
        const input = document.querySelector('table input[type="text"]');
        console.log('input changed', input);
        if (input && input.placeholder === '输入标题,回车新建') {
            console.log('发现input', 1.0);
            renderTaskNameList();
        }
    }, 500);

    // 监听dom，当出现placeholder为[输入标题,回车新建]的input的时候，用vue渲染一个按钮
    const observer = new MutationObserver((mutationsList) => {
        for (const mutation of mutationsList) {
            if (mutation.type === 'childList') {
                if (renderTaskNameList_state === false) {
                    cb()
                }
            }
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });


    // setTimeout(() => {
    //     const script = document.createElement('script');
    //     script.src = 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js';
    //     script.onload = initVue;
    //     document.head.appendChild(script);
    // }, 2000)

    function initVue() {
        // 创建Vue实例
        new Vue({
            el: '.header-content-left>.slot',
            data: {
                message: 'Hello, Vue in Tampermonkey!',
                urls: [
                    { url: 'https://devops.cloud.oppoer.me/micro-app/noah-coteam/bugList/list?projectId=2096736&projectType=3', title: '项目协同' },
                    { url: 'https://devops.cloud.oppoer.me/micro-app/ocode-na/cpc/operation-platform/Drama_Admin/overview', title: '代码管理' },
                    { url: 'https://devops.cloud.oppoer.me/micro-app/ci-na/app/versions?psaId=149665&serverId=37288', title: '持续集成' },
                ]
            },
            template: `<div style="margin-left: 20px; display: flex; gap: 20px;">
            <a v-for="i in urls" :href="i.url">{{i.title}}</a>
            </div>`
        });
    }
    initVue();
})();